<html>
<meta name="viewport" content="width=device-width,height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
<body style="text-align: center">
    <div>
        <div id="testCanvas" style="background-color: #000000; width:320px; height: 480px; margin: auto"></div>
    </div>
    <script src="js/howler.core.min.js"></script>
    <script src="js/jszip.min.js"></script>
	<script src="js/jszip-utils.min.js" charset="utf-8"></script>
    <script src="js/svga.min.js"></script>


    <script>

        var username = GetQueryString("param");
        function GetQueryString(name){
            var reg = new RegExp("(^|&)"+name+"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null)
                return  unescape(r[2]);
            return null;
        }

        var parser = new SVGA.Parser('#testCanvas')
        var player = new SVGA.Player('#testCanvas')
        parser.load(username, function (videoItem) {
            // player.setImage('./samples/avatar.png', '99')
            player.setVideoItem(videoItem);
            player.startAnimation();
            // player.startAnimationWithRange({location: 20, length: 1}, false); 
        }, function (error) {
            alert(error.message);
        })
    </script>
</body>

</html>